<template>
  <mcard :hasbg="false"
         :hasicon="false">
    <span slot="left"
          style="font-weight: bold">
      <slot name="left"></slot>
    </span>
    <div slot="right">
      <span>
        <slot name="right"></slot>
      </span>
    </div>
    <div id="mchart"
         ref="chart"
         :style="{height:tableHeight,'min-height':'240px'}"></div>
  </mcard>
</template>
<script>
import echarts from '../utils/myechart';
export default {
    name: 'linechart',
    props: {
        configs: {
            type: Object,
            default() {
                return {
                    Rate: 0.0196078431372549,
                    InqItem: [
                        {
                            Name: '202111',
                            Value: 40,
                        },
                        {
                            Name: '202112',
                            Value: 62,
                        },
                    ],
                    ValidItem: [
                        {
                            Name: '202111',
                            Value: 2,
                        },
                        {
                            Name: '202112',
                            Value: 0,
                        },
                    ],
                    InqRate: [
                        {
                            Name: '202111',
                            Value: 0.35,
                        },
                        {
                            Name: '202112',
                            Value: 0,
                        },
                    ],
                    InqCompanyRate: [
                        {
                            Name: '202111',
                            Value: 0.65,
                        },
                        {
                            Name: '202112',
                            Value: 0,
                        },
                    ],
                };
            },
        },
    },
    data() {
        return {
            myChart: {},
            tableHeight: '240px',
        };
    },
    methods: {
        handlechart() {
            echarts.dispose(this.$refs.chart);
            this.myChart = echarts.init(this.$refs.chart);
            this.myChart.setOption({
                xAxis: {
                    type: 'category',
                    name: '月份',
                    splitLine: {
                        show: false, // 是否显示分隔线  默认为false 不显示
                    },
                    nameTextStyle: {
                        color: '#2c3e50',
                        padding: 25,
                    },
                    data: this.configs.data,
                    axisLabel: {
                        show: true,
                        color: '#999',
                        fontSize: '12',
                        margin: 20,
                        rotate: 330, // 旋转角度
                        interval: 0, //设置X轴数据间隔几个显示一个，为0表示都显示
                    },
                    axisTick: {
                        alignWithLabel: true, //坐标轴刻度与标签对齐  如果不设置 默认坐标刻度与刻度标签不对齐
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#e1e1e1',
                            width: 2,
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '询价条数',
                        min: 0,
                        max: this.configs.max,
                        interval: Math.ceil(this.configs.max / 10),
                        // interval: 10,
                        nameTextStyle: {
                            color: '#2c3e50',
                            padding: [5, 5],
                            align: 'right',
                        },
                        splitLine: {
                            // 分隔线样式
                            lineStyle: {
                                type: 'dashed', // 改变分隔线样式为虚线 默认是直线
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: '#999',
                            fontSize: '12',
                            formatter: '{value}条',
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#e1e1e1',
                                width: 1,
                            },
                        },
                    },
                    {
                        type: 'value',
                        name: '率值',
                        min: 0,
                        max: 100,
                        interval: 20,
                        nameTextStyle: {
                            color: '#2c3e50',
                            padding: [5, 5],
                            align: 'left',
                        },
                        splitLine: {
                            // 分隔线样式
                            lineStyle: {
                                type: 'dashed',
                            },
                        },
                        axisLabel: {
                            show: true,
                            color: '#999',
                            fontSize: '12',
                            formatter: '{value}%',
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#e1e1e1',
                                width: 1,
                            },
                        },
                    },
                ],
                grid: {
                    //设置柱状图位置   上下左右距离也可以用   y y2 x x2 表示 可以用百分比表示也可以直接数字  例如 x:20
                    top: '18%',
                    bottom: '10%',
                    containLabel: true, // 表示grid 区域是否包含坐标轴的刻度标签 常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件
                },
                // 提示框
                tooltip: {
                    trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                    showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                    hideDelay: 100, // 隐藏延迟，单位ms
                    transitionDuration: 0.6, // 动画变换时间，单位s
                    backgroundColor: '#fff', // 提示背景颜色，默认为透明度为0.7的黑色
                    borderColor: '#333', // 提示边框颜色
                    borderRadius: 4, // 提示边框圆角，单位px，默认为4
                    borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
                    padding: 5, // 提示内边距，单位px，默认各方向内边距为5，// 接受数组分别设定上右下左边距，同css
                    axisPointer: {
                        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                        lineStyle: {
                            // 直线指示器样式设置
                            color: 'transparent',
                            width: 2,
                            type: 'solid',
                        },
                        shadowStyle: {
                            // 阴影指示器样式设置
                            width: 'auto', // 阴影大小
                            color: 'rgba(150,150,150,0.3)', // 阴影颜色
                        },
                    },
                    textStyle: {
                        color: '#333',
                    },
                    formatter: function (params) {
                        let str =
                            '<div style="font-size:12px;text-align:left;margin:5px 0px">' + params[0].name + '</div>';
                        params.forEach((item, index) => {
                            str +=
                                '<div style="font-size:12px;text-align:left;margin:5px 0px"><span style="font-size:12px;text-align:left;display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
                                item.color +
                                '"></span>' +
                                item.seriesName +
                                ' : ' +
                                item.data +
                                (index > 1 ? '%' : '');
                            ('</div>');
                        });

                        return str;
                    },
                },
                legend: {
                    data: ['明细总数量', '有效报价单总数量', '询价成功率', '询价成功率平均值'],
                    orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
                    x: 'center', // 水平安放位置，默认为全图居中，可选为：
                    y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
                },
                series: [
                    {
                        name: '明细总数量',
                        data: this.configs.Items,
                        type: 'bar',
                        symbol: 'circle',
                        itemStyle: {
                            color: '#45cbff',
                        },
                    },
                    {
                        name: '有效报价单总数量',
                        data: this.configs.ValidItems,
                        type: 'bar',
                        symbol: 'cycle',
                        barGap: '-100%',
                        itemStyle: {
                            color: '#1890ff',
                        },
                    },
                    {
                        name: '询价成功率',
                        data: this.configs.ItemsRate,
                        type: 'line',
                        symbol: 'circle',
                        yAxisIndex: 1,
                        itemStyle: {
                            color: '#f7c878',
                        },
                    },
                    {
                        name: '询价成功率平均值',
                        data: this.configs.AllItemsRate,
                        yAxisIndex: 1,
                        type: 'line',
                        symbol: 'cycle',
                        itemStyle: {
                            color: '#39d777',
                        },
                    },
                ],
            });
            window.onresize = function () {
                this.tableHeight =
                    (window.innerHeight - 390) / 2 > 240 ? (window.innerHeight - 390) / 2 + 'px' : '240px';
                this.myChart.resize({ height: this.tableHeight });
            };
        },
    },
    activated() {
        this.handlechart();
    },
    mounted() {
        this.handlechart();
        this.tableHeight = (window.innerHeight - 390) / 2 > 240 ? (window.innerHeight - 390) / 2 + 'px' : '240px';
        this.$nextTick(() => {
            this.myChart.resize({ height: this.tableHeight });
        });
    },
    computed: {},
    watch: {
        configs: {
            deep: true,
            handler: function (v) {
                this.configs = v;
                this.handlechart();
            },
        },
    },
};
</script>

<style lang="scss" scoped>
.mycard {
    margin: 0px 10px;
    ::v-deep.header {
        border: none;
    }
    ::v-deep.body {
        border: 1px solid #ebeef5;
        padding: 5px 15px;
    }
}
#mchart {
    width: 100%;
    max-width: 972px;
    min-width: 500px;
    text-align: center;
    margin: 0 auto;
}
</style>
